<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 | 企业管理系统</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-light: #5a75f0;
            --secondary-color: #3f37c9;
            --accent-color: #4cc9f0;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4ade80;
            --error-color: #f87171;
            --warning-color: #fbbf24;
            --gradient-start: #667eea;
            --gradient-end: #764ba2;
            --input-border: #e1e5eb;
            --input-focus-border: #4361ee;
            --input-shadow: rgba(67, 97, 238, 0.2);
            --btn-hover-shadow: rgba(67, 97, 238, 0.35);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
            padding: 15px;
        }

        .register-container {
            display: flex;
            width: 100%;
            max-width: 1000px;
            height: auto;
            min-height: 580px;
            background: rgba(255, 255, 255, 0.97);
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            position: relative;
            z-index: 10;
            animation: fadeIn 0.8s ease-out;
        }

        .register-illustration {
            flex: 1;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
            color: white;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .register-illustration::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            top: -80px;
            left: -80px;
            animation: pulse 8s infinite;
        }

        .register-illustration::after {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            bottom: -80px;
            right: -80px;
            animation: pulse 6s infinite;
        }

        .register-illustration h2 {
            font-size: 2.4rem;
            font-weight: 700;
            margin-bottom: 15px;
            z-index: 2;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
            animation: slideInLeft 0.8s ease-out;
        }

        .register-illustration p {
            font-size: 1.1rem;
            opacity: 0.9;
            text-align: center;
            max-width: 85%;
            z-index: 2;
            animation: slideInLeft 1s ease-out;
            line-height: 1.6;
        }

        .register-illustration img {
            width: 75%;
            margin-top: 30px;
            filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));
            transition: transform 0.5s ease;
            animation: floatImage 8s ease-in-out infinite;
        }

        .register-form {
            flex: 1;
            padding: 45px 45px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow-y: auto;
        }

        .logo-container {
            text-align: center;
            margin-bottom: 30px;
            animation: slideInRight 0.8s ease-out;
        }

        .logo-container img {
            width: 80px;
            height: 80px;
            margin-bottom: 15px;
            transition: transform 0.3s ease;
        }

        .logo-container img:hover {
            transform: scale(1.05);
        }

        .logo-container h1 {
            font-size: 2.4rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 5px;
            letter-spacing: -0.5px;
        }

        .form-group {
            margin-bottom: 22px;
            position: relative;
            animation: fadeIn 0.6s ease-out;
            animation-fill-mode: both;
        }

        .form-group:nth-child(1) {
            animation-delay: 0.2s;
        }
        .form-group:nth-child(2) {
            animation-delay: 0.3s;
        }
        .form-group:nth-child(3) {
            animation-delay: 0.4s;
        }
        .form-group:nth-child(4) {
            animation-delay: 0.5s;
        }
        .form-group:nth-child(5) {
            animation-delay: 0.6s;
        }
        .form-group:nth-child(6) {
            animation-delay: 0.7s;
        }

        .form-control {
            width: 100%;
            height: 55px;
            padding: 18px 15px 8px 45px;
            border: 2px solid var(--input-border);
            border-radius: 12px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background-color: #fafcff;
        }

        .form-control:focus {
            border-color: var(--input-focus-border);
            box-shadow: 0 0 0 4px var(--input-shadow);
            outline: none;
            background-color: white;
        }

        .form-control:focus + label,
        .form-control:not(:placeholder-shown) + label {
            top: 6px;
            font-size: 0.75rem;
            color: var(--primary-color);
        }

        .form-group label {
            position: absolute;
            top: 15px;
            left: 45px;
            color: #777;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .form-group i {
            position: absolute;
            left: 15px;
            top: 18px;
            color: #a0aec0;
            transition: all 0.3s ease;
        }

        .form-control:focus ~ i {
            color: var(--primary-color);
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 18px;
            cursor: pointer;
            color: #777;
            transition: color 0.2s ease;
        }

        .password-toggle:hover {
            color: var(--primary-color);
        }

        /* 重点优化：放大注册按钮 */
        .btn-register {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            border: none;
            height: 65px; /* 增加按钮高度 */
            border-radius: 12px;
            font-size: 1.25rem;
            font-weight: 600;
            margin-top: 20px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 6px 15px rgba(67, 97, 238, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.5px;
            padding: 0 20px;
        }

        .btn-register i {
            margin-right: 10px;
            font-size: 1.1em;
            position: static;
            color: inherit;
        }

        .btn-register:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px var(--btn-hover-shadow);
            background: linear-gradient(to right, var(--primary-light), var(--primary-color));
        }

        .btn-register:active {
            transform: translateY(1px);
        }

        .btn-register::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: 0.5s;
        }

        .btn-register:hover::after {
            left: 100%;
        }

        .login-link {
            text-align: center;
            margin-top: 25px;
            font-size: 1rem;
            animation: fadeIn 0.5s ease-out;
            animation-delay: 0.8s;
            animation-fill-mode: both;
        }

        .login-link a {
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }

        .login-link a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: width 0.3s ease;
        }

        .login-link a:hover {
            color: var(--secondary-color);
        }

        .login-link a:hover::after {
            width: 100%;
        }

        .error-message {
            background-color: var(--error-color);
            color: white;
            padding: 12px 18px;
            border-radius: 10px;
            margin-bottom: 25px;
            display: none;
            font-size: 1rem;
            animation: shake 0.5s;
        }

        .success-message {
            background-color: var(--success-color);
            color: white;
            padding: 12px 18px;
            border-radius: 10px;
            margin-bottom: 25px;
            display: none;
            font-size: 1rem;
            animation: fadeIn 0.5s;
        }

        .terms {
            display: flex;
            align-items: flex-start;
            margin-top: 15px;
            font-size: 0.9rem;
            color: #555;
            animation: fadeIn 0.5s ease-out;
            animation-delay: 0.7s;
            animation-fill-mode: both;
        }

        .terms input {
            margin-top: 4px;
            margin-right: 10px;
            accent-color: var(--primary-color);
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .terms label {
            cursor: pointer;
        }

        .terms a {
            color: var(--primary-color);
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .terms a:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }

        .floating-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .floating-item {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .floating-item:nth-child(1) {
            width: 160px;
            height: 160px;
            top: 10%;
            left: 5%;
            animation: float 18s infinite linear;
        }

        .floating-item:nth-child(2) {
            width: 90px;
            height: 90px;
            top: 20%;
            right: 10%;
            animation: float 15s infinite linear reverse;
        }

        .floating-item:nth-child(3) {
            width: 130px;
            height: 130px;
            bottom: 15%;
            left: 15%;
            animation: float 22s infinite linear;
        }

        .floating-item:nth-child(4) {
            width: 70px;
            height: 70px;
            bottom: 25%;
            right: 20%;
            animation: float 17s infinite linear reverse;
        }

        /* Animations */
        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-30px) rotate(180deg);
            }
            100% {
                transform: translateY(0) rotate(360deg);
            }
        }

        @keyframes floatImage {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-15px);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.1); opacity: 0.5; }
            100% { transform: scale(1); opacity: 0.8; }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-8px); }
            40%, 80% { transform: translateX(8px); }
        }

        .password-strength {
            height: 5px;
            background: #e1e5eb;
            border-radius: 3px;
            margin-top: 8px;
            overflow: hidden;
        }

        .strength-meter {
            height: 100%;
            width: 0;
            transition: width 0.3s ease;
        }

        .strength-weak {
            background-color: var(--error-color);
        }

        .strength-medium {
            background-color: var(--warning-color);
        }

        .strength-strong {
            background-color: var(--success-color);
        }

        .strength-text {
            font-size: 0.8rem;
            margin-top: 5px;
            color: #666;
            text-align: right;
        }

        .strength-weak-text { color: var(--error-color); }
        .strength-medium-text { color: var(--warning-color); }
        .strength-strong-text { color: var(--success-color); }

        .password-rules {
            font-size: 0.8rem;
            color: #777;
            margin-top: 5px;
            line-height: 1.4;
        }

        .password-rules ul {
            padding-left: 20px;
            margin-top: 5px;
        }

        .password-rules li {
            margin-bottom: 3px;
        }

        .password-rules .valid {
            color: var(--success-color);
        }

        .password-rules .invalid {
            color: var(--error-color);
        }

        /* Responsive styles */
        @media (max-width: 992px) {
            .register-container {
                max-width: 850px;
            }

            .register-form {
                padding: 40px 35px;
            }
        }

        @media (max-width: 768px) {
            .register-container {
                flex-direction: column;
                max-width: 550px;
                max-height: 90vh;
            }

            .register-illustration {
                padding: 30px 20px;
            }

            .register-illustration h2 {
                font-size: 2.0rem;
            }

            .register-form {
                padding: 35px 30px;
            }

            .logo-container h1 {
                font-size: 2.1rem;
            }

            .btn-register {
                height: 60px;
                font-size: 1.2rem;
            }
        }

        @media (max-width: 480px) {
            .register-container {
                width: 95%;
                border-radius: 15px;
            }

            .register-illustration {
                padding: 25px 15px;
            }

            .register-form {
                padding: 30px 20px;
            }

            .logo-container img {
                width: 75px;
                height: 75px;
            }

            .logo-container h1 {
                font-size: 1.9rem;
            }

            .form-control {
                height: 52px;
                padding-left: 40px;
            }

            .form-group i {
                left: 12px;
            }

            .btn-register {
                height: 58px;
                font-size: 1.15rem;
            }

            .register-illustration h2 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>

<body>
<!-- Floating background elements -->
<div class="floating-bg">
    <div class="floating-item"></div>
    <div class="floating-item"></div>
    <div class="floating-item"></div>
    <div class="floating-item"></div>
</div>

<div class="register-container">
    <div class="register-illustration">
        <h2>创建新账户</h2>
        <p>注册企业管理系统账号，开启高效管理之旅</p>
        <img src="https://cdn-icons-png.flaticon.com/512/3209/3209260.png" alt="Register Illustration">
    </div>

    <div class="register-form">
        <div class="logo-container">
            <img src="https://cdn-icons-png.flaticon.com/512/6681/6681204.png" alt="App Logo">
            <h1>用户注册</h1>
        </div>

        <div class="error-message" id="errorMessage">
            <i class="fas fa-exclamation-circle"></i> <span id="errorText">请填写所有必填字段</span>
        </div>

        <div class="success-message" id="successMessage">
            <i class="fas fa-check-circle"></i> <span id="successText">注册成功！正在跳转登录页面...</span>
        </div>

        <div class="form-group">
            <i class="fas fa-user"></i>
            <input type="text" class="form-control" id="fullName" name="fullName" placeholder=" " autocomplete="name">
            <label for="fullName">姓名</label>
        </div>

        <div class="form-group">
            <i class="fas fa-at"></i>
            <input type="text" class="form-control" id="username" name="username" placeholder=" " autocomplete="username">
            <label for="username">用户名</label>
        </div>

        <div class="form-group">
            <i class="fas fa-envelope"></i>
            <input type="email" class="form-control" id="email" name="email" placeholder=" " autocomplete="email">
            <label for="email">电子邮箱</label>
        </div>

        <div class="form-group">
            <i class="fas fa-lock"></i>
            <input type="password" class="form-control" id="password" name="password" placeholder=" " autocomplete="new-password">
            <label for="password">密码</label>
            <span class="password-toggle" id="passwordToggle">
                <i class="far fa-eye"></i>
            </span>
            <div class="password-strength">
                <div class="strength-meter" id="passwordStrength"></div>
            </div>
            <div class="strength-text" id="strengthText">密码强度</div>
            <div class="password-rules" id="passwordRules">
<!--                <p>密码要求：</p>-->
<!--                <ul>-->
<!--                    <li id="lengthRule" class="invalid">至少8个字符</li>-->
<!--                    <li id="uppercaseRule" class="invalid">包含大写字母</li>-->
<!--                    <li id="numberRule" class="invalid">包含数字</li>-->
<!--                    <li id="specialRule" class="invalid">包含特殊字符</li>-->
<!--                </ul>-->
            </div>
        </div>

        <div class="form-group">
            <i class="fas fa-lock"></i>
            <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder=" " autocomplete="new-password">
            <label for="confirmPassword">确认密码</label>
            <span class="password-toggle" id="confirmPasswordToggle">
                <i class="far fa-eye"></i>
            </span>
        </div>

        <div class="form-group">
            <i class="fas fa-phone"></i>
            <input type="tel" class="form-control" id="phone" name="phone" placeholder=" " autocomplete="tel">
            <label for="phone">手机号码 (可选)</label>
        </div>

        <div class="terms">
            <input type="checkbox" id="termsAgreement">
            <label for="termsAgreement">我同意<a href="#">《用户服务协议》</a>和<a href="#">《隐私政策》</a></label>
        </div>

        <button class="btn btn-register" id="registerBtn">
            <i class="fas fa-user-plus"></i> 注册账号
        </button>

        <div class="login-link">
            已有账号? <a href="#" id="loginLink">立即登录</a>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        // Password visibility toggle
        $("#passwordToggle").click(function() {
            const passwordInput = $("#password");
            const icon = $(this).find("i");

            if (passwordInput.attr("type") === "password") {
                passwordInput.attr("type", "text");
                icon.removeClass("fa-eye").addClass("fa-eye-slash");
            } else {
                passwordInput.attr("type", "password");
                icon.removeClass("fa-eye-slash").addClass("fa-eye");
            }
        });

        // Confirm password visibility toggle
        $("#confirmPasswordToggle").click(function() {
            const confirmPasswordInput = $("#confirmPassword");
            const icon = $(this).find("i");

            if (confirmPasswordInput.attr("type") === "password") {
                confirmPasswordInput.attr("type", "text");
                icon.removeClass("fa-eye").addClass("fa-eye-slash");
            } else {
                confirmPasswordInput.attr("type", "password");
                icon.removeClass("fa-eye-slash").addClass("fa-eye");
            }
        });

        // Password strength indicator
        $("#password").on("input", function() {
            const password = $(this).val();
            const strengthMeter = $("#passwordStrength");

            if (password.length === 0) {
                strengthMeter.css("width", "0");
                return;
            }

            let strength = 0;
            if (password.length >= 8) strength += 25;
            if (/[A-Z]/.test(password)) strength += 25;
            if (/[0-9]/.test(password)) strength += 25;
            if (/[^A-Za-z0-9]/.test(password)) strength += 25;

            strengthMeter.css("width", strength + "%");

            if (strength < 50) {
                strengthMeter.removeClass().addClass("strength-meter strength-weak");
            } else if (strength < 75) {
                strengthMeter.removeClass().addClass("strength-meter strength-medium");
            } else {
                strengthMeter.removeClass().addClass("strength-meter strength-strong");
            }
        });

        // Register button click handler
        $("#registerBtn").click(function() {
            const $btn = $(this);
            const originalBtnHtml = $btn.html();
            const fullName = $("#fullName").val().trim();
            const username = $("#username").val().trim();
            const email = $("#email").val().trim();
            const password = $("#password").val().trim();
            const confirmPassword = $("#confirmPassword").val().trim();
            const termsAgreement = $("#termsAgreement").is(":checked");

            // Hide previous messages
            $("#errorMessage").hide();
            $("#successMessage").hide();

            // Validation
            let error = "";
            if (!fullName) error = "请输入您的姓名";
            else if (!username) error = "请输入用户名";
            else if (!email) error = "请输入电子邮箱";
            else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) error = "请输入有效的电子邮箱";
            else if (!password) error = "请设置密码";
            else if (password.length < 8) error = "密码长度至少为8位";
            else if (password !== confirmPassword) error = "两次输入的密码不一致";
            else if (!termsAgreement) error = "请同意用户协议和隐私政策";

            if (error) {
                $("#errorText").text(error);
                $("#errorMessage").show();
                return;
            }

            // AJAX registration request
            $btn.prop("disabled", true).html('<span class="loading-spinner"></span> 注册中...');

            $.ajax({
                url: '/user/register', // 后端注册接口URL
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    username: username,
                    password: password,
                    real_name: fullName,  // 注意字段名对应后端
                    email: email,
                    phone: $("#phone").val().trim() || null
                }),
                success: function(response) {
                    $("#successText").text("注册成功！正在跳转到登录页面...");
                    $("#successMessage").show();
                    setTimeout(function() {
                        window.location.href = "/login";
                    }, 2000);
                },
                error: function(xhr) {
                    $btn.prop("disabled", false).html(originalBtnHtml);

                    // 解析错误信息
                    let errorMessage = "注册失败，请稍后重试";
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    } else if (xhr.status === 400) {
                        errorMessage = "请求参数错误";
                    } else if (xhr.status === 409) {
                        errorMessage = "用户名或邮箱已被注册";
                    }

                    $("#errorText").text(errorMessage);
                    $("#errorMessage").show();
                }
            });

            // Login link
            $("#loginLink").click(function(e) {
                e.preventDefault();
                window.location.href = "/login"; // 跳转到登录页面
            });

            // Handle Enter key press
            $(document).keypress(function(e) {
                if (e.which === 13) { // Enter key
                    $("#registerBtn").click();
                }
            });
        })
    })
</script>
</body>
</html>